CKEDITOR.plugins.add('addcode',
{icons:'addcode',
init: function(editor) {
// Add the link and unlink buttons.
editor.addCommand('addcode', new CKEDITOR.dialogCommand('addcode')); //定義dialog，也就是下面的code
editor.ui.addButton('Addcode',     //定義button的名稱及圖片,以及按下後彈出的dialog
{     
// icons:this.path+'/icons/addcode.png',                          //這裡將button名字取叫'Code'，因此剛剛上方的toolbar也是加入名為Code的按鈕
label: '插入代码',
command:'addcode',
toolbar:'insert'
});
//CKEDITOR.dialog.add( 'link’, this.path + 'dialogs/link.js’ );  
//dialog也可用抽離出去變一個js，不過這裡我直接寫在下面
CKEDITOR.dialog.add('addcode', function(editor) {       
//以下開始定義dialog的屬性及事件           
return{                        //定義簡單的title及寬高
title: '选择语言类型',
minWidth: 500,
minHeight: 400,
contents: [              
{
id: 'code',
label: 'code',
title: 'code',
elements:              //elements是定義dialog內部的元件，除了下面用到的select跟textarea之外
[                  //還有像radio或是file之類的可以選擇
{
type: 'select',
//label: 'Language',
id: 'language',
//required: true,
'default': 'c',
items: [['C', 'c'], ['Java', 'java'], ['Html', 'xhtml'], ['JavaScript', 'js'], ['Python', 'python'], ['XML', 'xml']]
}
, {
id: 'codecontent',
type: 'textarea',
//label: '請輸入程式碼',
style: 'width:700px;height:500px',
rows: 30,
'default': ''
}
]
}
],
onOk: function() {                                    //當按下ok鈕時,將上方定義的元件值取出來，利用insertHtml
code = this.getValueOf('code', 'codecontent');
var RexStr = /\<|\>/g 
    code = code.replace(RexStr, function(MatchStr) { 
        switch (MatchStr) { 
        case "<": 
            return "&lt"; 
            break; 
        case ">": 
            return "&gt"; 
            break; 
        default: 
            break; 
        } 
    })     //將組好的字串插入ckeditor的內容中
lang = this.getValueOf('code', 'language');
editor.insertHtml("<div class='container site-page'><div class='row'><div class='col-sm-9 site-main'><article id='post-88' class='post-88 post type-post status-publish format-standard has-post-thumbnail hentry category-others tag-unix'><div class='entry-content'><pre><code class='"+lang+"'>"+code+"</code></pre></div></article></div></div></div>");

} 
}; 
}); 
} 
});